<template>
  <el-dialog
          model-value="dialogVisible"
          title="选择资产"
          width="80%"
          align-center
          @close="handleClose"
  >
    <el-row :gutter="20" class="d_header">
      <el-col :span="5">
        <el-input placeholder="请输入资产名称..." v-model="queryForm.map.zcmc" clearable></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initAssetList">搜索</el-button>
      <el-select v-model="queryForm.map.typeId" placeholder="资产类别" style="width: 100px;margin-left: 10px">
        <el-option
                v-for="item in assetType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native="initAssetList"
        />
      </el-select>
      <el-button type="primary" :icon="Setting" @click="showAll" style="margin-left: 10px">重置</el-button>
      <div style="position: absolute;right:10px">
        <el-button type="success" :icon="SoldOut" @click="insertSelect">插入选定的数据</el-button>
      </div>
    </el-row>
    <el-table
            ref="tableDataRef"
            :data="tableData"
            border stripe
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{textAlign: 'center'}"
            @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"/>
      <el-table-column prop="sts" width="75" label="状态">
        <template v-slot="scope">
          <el-tag size="default" v-if="scope.row.sts === 1" type="success" effect="dark">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="rksj" label="入库时间" :formatter="formatDate"/>
      <el-table-column prop="zcbh" label="资产编号"/>
      <el-table-column prop="zcmc" label="资产名称"/>
      <el-table-column prop="assetType" label="资产类别" width="140" :formatter="formatterAssetType"/>
      <el-table-column prop="zcxh" label="资产型号"/>
      <el-table-column prop="zcdj" label="资产单价"/>
      <el-table-column prop="zcje" label="资产金额"/>
      <el-table-column prop="sccj" label="生产厂家"/>
      <el-table-column prop="scrq" label="生产日期" :formatter="formatDate"/>
      <el-table-column prop="kcsl" label="库存数量"/>
    </el-table>
    <el-pagination
            v-model:current-page="queryForm.pageNum"
            v-model:page-size="queryForm.pageSize"
            :page-sizes="[10,20,20,40,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, getCurrentInstance } from "vue";
import moment from "moment";
import request from "@/util/request";
import { Delete, Search, SoldOut, Setting } from '@element-plus/icons-vue';

/**
 * vue3中操作ref实例的写法（proxy代替this）
 */
const {proxy} = getCurrentInstance()

/**
 * 表格数据初始化
 */
const tableData = ref([]);

/**
 *数据总数初始化
 */
const total = ref()

/**
 *查询条件初始化
 */
const queryForm = ref({
  map:{
    zcmc:"",
    typeId:"",
  },
  pageNum: 1,
  pageSize: 10
})

/**
 * 获取资产数据
 */
const initAssetList = async () => {
  const res = await request.post("asset/list", queryForm.value);
  tableData.value = res.data.assetList;
  total.value = res.data.total;
}
initAssetList();

/**
 * 获取资产设备分类数据
 */
const assetType = ref([])
const initAssetTypeList = async () => {
  const res = await request.get("assetType/list");
  assetType.value = res.data.assetTypeList;
}
initAssetTypeList();

/**
 * 重置
 */
const showAll = () => {
  queryForm.value.query = "";
  queryForm.value.query2 = "";
  initAssetList();
}

/**
 * 处理每页记录数变化
 * @param pageSize
 */
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initAssetList();
}

/**
 * 处理第几页变化
 * @param pageNum
 */
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initAssetList();
}

/**
 * 格式化资产类别assetType数组信息
 * @param row
 * @returns {string}
 */
const formatterAssetType = (row) => {
  let assetTypeName = []
  for (var i = 0; i < row.assetType.length; i++) {
    assetTypeName.push(row.assetType[i].name)
  }
  return assetTypeName.join()
}

/**
 * 表格通用格式化时间信息
 * @param row
 * @param column
 * @returns {string}
 */
const formatDate = (row, column) => {
  let date = row[column.property];
  if (date === undefined) {
    return "";
  }
  return moment(date).format("YYYY-MM-DD");
}

const id = ref(-1)
const handleSelectionChange = (selection) => {
  if (selection.length > 1) {
    proxy.$refs.tableDataRef.clearSelection()
    proxy.$refs.tableDataRef.toggleRowSelection(selection.pop())
  } else if (selection.length === 1) {
    id.value = selection.pop().id
    console.log(id.value)
  } else {
    id.value = -1;
  }
}

/**
 * 向父组件抛方法
 */
const emits = defineEmits(['update:modelValue', 'id'])

/**
 * 手动关闭对话框
 */
const handleClose = () => {
  emits('update:modelValue', false);//关闭dialog
  proxy.$refs.tableDataRef.clearSelection();//清空选中的
}

/**
 * 传递选中数据的id
 */
const insertSelect = () => {
  emits('id', id.value);
  handleClose()
}
</script>

<style lang="scss" scoped>
.el-pagination {
  float: right;
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 15px;
}

.d_header {
  margin-bottom: 15px;
}

::v-deep .el-table__header-wrapper .el-checkbox {
  //找到表头那一行，然后把里面的复选框隐藏掉
  display: none
}

</style>